<template>
  <div class="boxshow phone_news" v-if="partListCon">
    <!-- {{ partListCon }} -->
    <modueltitle :info="partListCon"></modueltitle>
    <div class="cityinfo_show">
      <div class="task_report">
        <div class="task_report_item">
          <div class="task_left">
            <img src="./../../../../assets/img/meb/task_title.png" alt="" />
          </div>
          <p>xxx完成任务，获得奖励 <span>12.8</span> 元</p>
        </div>
      </div>
      <div class="task_title">
        <span></span>推荐任务
        <span>更多推荐</span>
      </div>
      <div class="task_body">
        <div class="taskitem">
          <div class="taskheader">
            <div>
              <div>
                <img :src="$fnc.getImgUrl(info.avatar)" width="38px" height="38px" alt="" />
              </div>
              <div>
                <div class="headertitle">
                  <p>支付宝辅助一分钟完成</p>
                  <img src="./../../../../assets/img/meb/task_icon1.png" alt="" v-if="info.refresh_time > 0" />
                </div>

                <div class="header_sub">
                  <p>
                    20人已赚钱，6小时内完成
                  </p>
                </div>
              </div>
              <div>赏27.00元</div>
            </div>
          </div>
          <div class="taskitem_introduct">
            <span>任务说明：</span>
            如手机有淘宝的必须先卸载后才可以
            做任务，手机号是必须未注册过淘宝账号的，购
            买物品必须大于等于10元，订单必须再一个小时 内完成。
          </div>
          <div class="taskitem_img">
            <div>
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <van-icon class="icons" name="weapp-nav" />
            </div>
            <div>已有30人参与</div>
          </div>
          <div class="taskitem_label">
            <div><span>#</span>特单任务</div>
            <div><span>#</span>淘宝</div>
            <div><span>#</span>高单价</div>
          </div>
        </div>
        <div class="taskitem">
          <div class="taskheader">
            <div>
              <div>
                <img :src="$fnc.getImgUrl(info.avatar)" width="38px" height="38px" alt="" />
              </div>
              <div>
                <div class="headertitle">
                  <p>支付宝辅助一分钟完成</p>
                  <img src="./../../../../assets/img/meb/task_icon1.png" alt="" v-if="info.refresh_time > 0" />
                </div>

                <div class="header_sub">
                  <p>
                    20人已赚钱，6小时内完成
                  </p>
                </div>
              </div>
              <div>赏27.00元</div>
            </div>
          </div>
          <div class="taskitem_introduct">
            <span>任务说明：</span>
            如手机有淘宝的必须先卸载后才可以
            做任务，手机号是必须未注册过淘宝账号的，购
            买物品必须大于等于10元，订单必须再一个小时 内完成。
          </div>
          <div class="taskitem_img">
            <div>
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <img src="./../../../../assets/img/ava.jpg" alt="" />
              <van-icon class="icons" name="weapp-nav" />
            </div>
            <div>已有30人参与</div>
          </div>
          <div class="taskitem_label">
            <div><span>#</span>特单任务</div>
            <div><span>#</span>淘宝</div>
            <div><span>#</span>高单价</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import modueltitle from "@/components/page/module/module_center/module_title_show";
export default {
  data () {
    return {
      info: {
        id: "10",
        uid: "11",
        cid: "48",
        bid: "1",
        info_number: "15923745590000001",
        iden: "a",
        title: "马尾-福州",
        img:
          '["/api/resource/image/default/202006/97f20f02470873d7d599df1b19c8d13e.jpg","/api/resource/image/default/202006/7449849aa085cc6bcfbe38a745b27d9d.jpg","/api/resource/image/default/202006/abbf6655d6e98a9ef666695f9ca80113.jpg","/api/resource/image/default/202',
        visit_number: "1",
        reply_number: "0",
        contacts_name: "司机小王",
        contacts_phone: "17788881111",
        longitude: "119.33477783203125",
        latitude: "26.057165145874023",
        address: "福建省福州市台江区排尾路",
        top_time: "1592374559",
        created_time: "1592374559",
        update_time: "1592380347",
        field: [
          {
            id: "31",
            title: "文本框标题",
            iden: "title",
            bid: "48",
            remark: "",
            default: "请输入标题",
            is_open: "1",
            is_verification: "1",
            created_time: "1592205227",
            update_time: "1592277085",
            types: "1",
            parameter: "",
            value: "马尾-福州"
          },
          {
            id: "32",
            title: "乘车时间",
            iden: "cartime",
            bid: "48",
            remark: "",
            default: "",
            is_open: "1",
            is_verification: "1",
            created_time: "1592205310",
            update_time: "1592205310",
            types: "5",
            parameter: null,
            value: "1592374440"
          },
          {
            id: "33",
            title: "下拉乘车人数",
            iden: "number",
            bid: "48",
            remark: "",
            default: "请选择乘车人数",
            is_open: "1",
            is_verification: "1",
            created_time: "1592205948",
            update_time: "1592277093",
            types: "4",
            parameter: "1@2@3@4@5",
            value: "1"
          },
          {
            id: "34",
            title: "乘车单选",
            iden: "carsel",
            bid: "48",
            remark: "",
            default: "请选择",
            is_open: "1",
            is_verification: "1",
            created_time: "1592276741",
            update_time: "1592277100",
            types: "2",
            parameter: "A@B@C",
            value: "A"
          },
          {
            id: "35",
            title: "多选",
            iden: "sellmore",
            bid: "48",
            remark: "",
            default: "请多选",
            is_open: "1",
            is_verification: "1",
            created_time: "1592276812",
            update_time: "1592276812",
            types: "3",
            parameter: "AAA@BBB@CCC",
            value: "BBB@AAA"
          },
          {
            id: "37",
            title: "文本域",
            iden: "textarea",
            bid: "48",
            remark: "",
            default: "",
            is_open: "1",
            is_verification: "0",
            created_time: "1592276871",
            update_time: "1592276871",
            types: "7",
            parameter: null,
            value: "12312312312321312312312321"
          }
        ],
        main_id: "10",
        class_title: ["车找人", "顺风车"],
        visit_data: [
          {
            id: "6",
            uid: "1",
            mid: "10",
            avatar:
              "/api/resource/image/default/201912/329e5d0c957ac2e86623d1c33f6b0c14.jpg",
            created_time: "1592380347",
            update_time: "1592380347"
          }
        ]
      },
      cateList: [],
      newslist: []
    };
  },
  components: {
    modueltitle
  },
  props: {
    index: {
      type: Number,
      default: -1
    }
  },

  computed: {
    imglist () {
      try {
        return JSON.parse(this.info.img);
      } catch (error) {
        return [];
      }
    },
    ...mapState({
      active: state => state.modulePage.active,
      bannerNowIndex: state => state.modulePage.bannerNowIndex || 0,
      allbanner: state => state.modulePage.allbanner,
      partListCon () {
        if (this.index >= 0) {
          if (this.allbanner[this.index].text > 0) {
            this.getnewslist(this.allbanner[this.index].text);
          }
          return this.allbanner[this.index];
        } else {
          return {};
        }
      },
      now_status_cate () {
        try {
          return this.partListCon.text;
        } catch (error) {
          return 0;
        }
      }
    })
  },

  created () {
    this.getcate();
  },
  mounted () { },
  methods: {
    getcate () {
      this.$api.getClassify.getClassInfo().then(res => {
        if (res.data.code == 200) {
          this.cateList = res.data.result;
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.boxshow {
  width: 100%;
}
.phone_news {
  width: 95%;
  border: 1px solid transparent;
  margin: 10px auto;
}
.phone_news_body {
  width: 94%;
  margin: 0 auto;
  position: relative;
}

.task_report {
  width: 100%;
  height: 32px;
  background-color: #ffffff;
  padding: 0 10px;
  // margin-bottom: 10px;
  .task_report_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .task_left {
      width: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      > img {
        width: 100%;
      }
    }
    > p {
      flex: 1;
      font-size: 14px;
      padding-left: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      > span {
        color: #ff4759;
      }
    }
  }
}
.task_title {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #f2b415;
  height: 50px;
  > span:nth-of-type(1) {
    width: 3px;
    height: 20px;
    background-color: #f2b415;
    font-size: 16px;
    margin-right: 5px;
    font-weight: bold;
  }
  > span:nth-of-type(2) {
    background-color: #f2b415;
    font-size: 12px;
    color: #48576c;
    background-color: #ececec;
    margin-left: auto;
    padding: 2px 5px;
    border-radius: 5px;
  }
}
.task_body {
  width: 100%;
}
.taskitem {
  width: 100%;
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  .taskheader {
    width: 100%;
    font-size: 15px;
    background-color: #fff;
    margin-bottom: 5px;
    // padding: 10px 13px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    > div:nth-child(1) {
      width: 100%;
      display: flex;
      align-items: center;
      > div:nth-of-type(1) {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      > div:nth-child(2) {
        flex: 1;
        margin-right: auto;
        margin-left: 5px;
        overflow: hidden;
        margin-right: 10px;
        > p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        > .headertitle {
          font-size: 16px;
          font-weight: bold;
          color: #333333;
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          > p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          > img {
            width: 13px;
            margin-left: 5px;
          }
        }
        > .header_sub {
          font-size: 14px;
          color: #bbbbbb;
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          > p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .van-icon {
            font-size: 18px;
            margin-left: 5px;
          }
        }
      }
      > div:nth-child(3) {
        width: auto;
        padding: 0 10px;
        height: 24px;
        color: #563500;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(254, 213, 0);
        border-top-left-radius: 10px;
        border-bottom: 4px solid #ffbe00;
      }
    }
    > div:nth-child(2) {
      width: 100%;
      flex: 1;
      font-size: 12px;
      color: #333333;
      display: flex;
      flex-wrap: wrap;
      > div {
        background-color: rgba(246, 246, 246, 1);
        margin-right: 15px;
        border-radius: 10px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        margin-top: 5px;
        span {
          display: inline-block;
          width: 16px;
          height: 16px;
          background-color: rgba(230, 229, 229, 1);
          color: #333333;
          text-align: center;
          line-height: 16px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
    }
  }
  > .taskitem_introduct {
    color: #333333;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 5px;
    span {
      text-align: justify;
      color: #c7c7c7;
    }
  }
  > .taskitem_img {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    & > div:nth-child(1) {
      margin-right: auto;
      display: flex;
      align-items: center;
      > img {
        width: 25px;
        margin-right: -4px;
        border-radius: 50%;
      }
      .icons {
        font-size: 20px;
        color: #dbdbdb;
        margin-left: 10px;
      }
    }
    & > div:nth-child(2) {
      color: #bbbbbb;
      font-size: 14px;
    }
  }
  .taskitem_label {
    font-size: 12px;
    color: #333333;
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    > div {
      background-color: rgba(246, 246, 246, 1);
      margin-right: 15px;
      border-radius: 10px;
      padding-right: 10px;
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      span {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: rgba(230, 229, 229, 1);
        color: #333333;
        text-align: center;
        line-height: 16px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
}
</style>
